<template>
  <div class="page-wrap">
    <div class="pages">
      <div class="routerView main">
        <RouterView v-slot="{ Component }">
          <Transition name="scale-slide">
            <component :is="Component" />
          </Transition>
        </RouterView>
      </div>
    </div>
  </div>
</template>

<script setup>
import { RouterView } from 'vue-router'


</script>


<style lang="scss" scoped>
.scale-slide-enter-active,
.scale-slide-leave-active {
  width: 100%;
  position: absolute;
  transition: all .3s ease;
  z-index: 10;
}

.scale-slide-enter-from {
  left: 20%;
  opacity: .0;
}

.scale-slide-enter-to {
  left: 0%;
}

.scale-slide-leave-from {
  transform: scale(1);
}

.scale-slide-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

.pages {
  width: 100vw;
  min-height: 100vh;
}
</style>
